﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LocationBoxSample.aspx.cs" Inherits="FriendsNearby.Geo.LocationBoxSample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>    
    <link rel="stylesheet" href="tabs.css" type="text/css" media="screen">
    <link rel="stylesheet" href="LocationBox.css" type="text/css" media="screen">
    <script type="text/javascript" src="tabber-minimized.js"></script>
    <script type="text/javascript" src="LocationBox.js"></script>    
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%= FriendsNearby.ConfigHelper.GoogleMapsAPIKey %>" type="text/javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <input type="text" name="myLat" id="myLat"/>
    <input type="text" name="myLat" id="myLong" />
    
    <div id="myLocation" class="tabber" style="width:350px;">
        <div class="tabbertab" id="tabDMS">
            <h2>DMS</h2>
        </div>
        <div class="tabbertab" id="tabDecimal">
            <h2>Decimal</h2>
        </div>
        <div class="tabbertab" id="tabAddress">
            <h2>Address</h2>
        </div>
    </div>    
    
    <script type="text/javascript">

        var myLocation = createLocationBox();
        createDmsBox(myLocation, document.getElementById('tabDMS'));
        createDecimalBox(myLocation, document.getElementById('tabDecimal'));
        createAddressBox(myLocation, document.getElementById('tabAddress'), {addressBox:{width:'210px'}});
        
        myLocation.AddLocationChangeEventListener( 
            function( m, p ) { 
                document.getElementById('myLat').value = p.lat; 
                document.getElementById('myLong').value = p.lon; 
            } 
        );
        
        myLocation.SetLocation(3, 2);
    </script>
    </div>    
    
    </form>
</body>
</html>
